<template>
	<view class="container">
		<u-navbar placeholder title="收银台" :autoBack="true"></u-navbar>

		<!-- <view class="text-center mar-top-60 mar-bottom-40 font-28">付款给 Ant Dog</view> -->

		<view class="text-center font-68 mar-top-60">
			<text class="font-28 mar-right-10">￥</text>
			<text class="font-w-600">{{ price }}</text>
		</view>

		<template v-if="list.length > 0">
			<view @click="hanldeSwitch" class="centerY pad-60 betweenX font-30 mar-top-120">
				<view>支付银行卡</view>
				<view class="centerY">
					<view>{{ list[pay].card_no }}</view>
					<u-icon class="mar-left-10" name="arrow-right" size="16"></u-icon>
				</view>
			</view>
		</template>

		<!-- 添加银行卡 -->
		<template v-else>
			<view class="centerY pad-24 betweenX font-30" @click="hanldeBindAdd">
				<view>添加新卡支付</view>
				<u-icon name="arrow-right" size="16"></u-icon>
			</view>
		</template>

		<view class="button-box mar-top-30 pad-left-right-32 pad-top-bottom-6 bg-white centerY">
			<view class="button font-30 flex-w" @click="$u.debounce(hanldePay,500)">确认支付</view>
		</view>

		<!-- 切换银行卡， 绑定银行卡 -->

		<!-- 确认支付方式 -->
		<u-popup :show="cashStatus" mode="bottom" round="18rpx" closeable @close="cashStatus = false">
			<view class="pad-32">
				<view class="font-36">选择支付的银行卡</view>
				<view class="pad-top-bottom-24 bg-white mar-top-24 radius24 height">
					<view v-for="(item,index) in list" :key="item.id" class="cell betweenX pad-24 font-28">
						<view class="color-grey">{{item.card_no}}</view>
						<view class="icon-box" @click="hanldeTypePay(index)">
							<u-icon v-if="pay == index" size="16" color="#df0007" name="checkbox-mark"></u-icon>
						</view>
					</view>

					<view class="centerY pad-24 betweenX font-30" @click="hanldeBindAdd">
						<view>添加新卡支付</view>
						<u-icon name="arrow-right" size="16"></u-icon>
					</view>
				</view>

				<view class="buttonConfirm font-32" @click="cashStatus = false">完成</view>
			</view>
		</u-popup>


		<u-popup :closeOnClickOverlay="false" :show="isPass" round="12" mode="center" closeable @close="isPass = false">
			<view class="pad-32 bg-uopup">
				<view class="font-40 text-center font-w-600 mar-top-60">请输入手机验证码</view>

				<view v-if="list[pay]" class="text-center mar-top-24 font-28">银行预留手机号{{list[pay].ext.custBindPhoneNo}}
				</view>

				<view class="centerX mar-top-bottom-76">
					<u-code-input @finish="hanldeFinish" focus v-model="secret" :maxlength="6"></u-code-input>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		backCardGetAll,
		goodsSaleInfo,
		postSaleOrder,
		cashierPay,
		postSmsConfirm
	} from '@/config/api.js'

	export default {
		data() {
			return {
				// 卡列表
				list: [],
				// 切换弹框
				cashStatus: false,
				// 当前支付的卡
				pay: 0,
				// 金额
				price: '0.00',
				// 验证码框
				isPass: false,
				// 验证码
				secret: ''
			}
		},
		onLoad(options) {
			this.infoId = options.id;
			// 获取发售详情数据
			this.getInfo();
		},
		onShow(){
			// 获取卡号列表
			this.getCardList();
		},
		methods: {
			// 获取详情
			getInfo() {
				goodsSaleInfo({
					id: this.infoId
				}).then(res => {
					let {
						info,
						goods_info
					} = res.data;
					this.data = info;
					this.price = info.price;
					this.goodsInfo = goods_info;
				})
			},
			// 切换卡
			hanldeTypePay(inx) {
				this.pay = inx;
			},
			// 打开切换银行卡弹框
			hanldeSwitch() {
				this.cashStatus = true;
			},
			// 获取所有银行卡
			getCardList() {
				backCardGetAll({
					plat_id: 13
				}).then(res => {
					this.list = res.data.kft;
				})
			},
			// 添加银行卡
			hanldeBindAdd() {
				uni.navigateTo({
					url: '/pages/kft/bindAdd'
				})
			},
			// 确认支付
			hanldePay() {
				if (this.list.length == 0) {
					uni.showToast({
						title: '你还未绑定支付银行卡',
						icon: 'none'
					})
					return
				}
				
				uni.showLoading({
					title: '支付中...',
					mask: true,
				})

				// 创建订单
				postSaleOrder({
					goods_sale_id: this.data.id
				}).then(order => {
					let kftData = this.list[this.pay].ext;
					// 支付订单
					cashierPay({
						order_id: order.data.order_id,
						pay_plat: order.data.amount == '0.00' ? 14 : 13,
						os: this.getEnvironment(),
						kft: {
							custBankNo: kftData.custBankNo,
							custBankAccountNo: kftData.custBankAccountNo,
							custName: kftData.custName,
							custBindPhoneNo: kftData.custBindPhoneNo,
						}
					}).then(res => {
						uni.hideLoading();

						if (order.data.amount == '0.00') {
							uni.navigateTo({
								url: '/pages/goods/orderList'
							})
							return
						}

						this.payInfo = res.data
						this.isPass = true;

					}).catch(() => {
						uni.hideLoading();
					})
				})
			},
			// 判断环境
			getEnvironment() {
				// #ifdef APP-PLUS
				return 'app'
				// #endif

				// #ifdef H5
				return 'wap'
				// #endif
			},
			// 获取验证码吗进行支付
			hanldeFinish(smsCode) {
				let data = {
					plat_id: 13,
					kft: {
						orderNo: this.payInfo.pay_flow_id,
						smsCode: smsCode
					}
				}

				postSmsConfirm(data).then(res => {
					this.isPass = false;

					uni.showToast({
						title: res.msg,
						icon:'none'
					})

					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/paySuccess/paySuccess'
						})
					}, 1000)
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		min-height: 100vh;

		::v-deep .u-navbar__content {
			background-image: url('../../static/image/my-bg.png');
			background-size: cover;
			background-repeat: no-repeat;
			background-color: #f5f5f5;
		}

		.button-box {
			width: 100%;

			.button-price {
				margin-right: 100rpx;
			}

			.button {
				background: linear-gradient(270deg, #df0007, #df0007);
				color: #fff;
				text-align: center;
				height: 92rpx;
				line-height: 92rpx;
				border-radius: 16rpx;
			}
		}

		.height {
			height: 800rpx;
		}

		.icon-box {
			width: 30rpx;
			flex-shrink: 0;
			height: 30rpx;
			border: 1rpx solid #c8c9cc;
			border-radius: 50%;
		}

		.buttonConfirm {
			background: linear-gradient(270deg, #df0007, #df0007);
			color: #fff;
			text-align: center;
			height: 92rpx;
			line-height: 92rpx;
			border-radius: 16rpx;
		}
	}
</style>